<template>
  <div class="push">
    <zhHeader title="房屋发布" :leftRouter="{name: 'chat'}">
      <span slot="left">返回</span>
    </zhHeader>
    <div class="form">
      <mt-field label="标题"></mt-field>
      <div class="province mb10r">
        <div class="title horizontal">省市</div>
        <mt-picker class="bcwh" :slots="provinces" @change="onAddressChange"></mt-picker>
      </div>
      <mt-field label="详细地址"></mt-field>
      <mt-field label="面积(m²)"></mt-field>
      <mt-checklist
        title="租赁方式"
        v-model="rentType"
        :max="1"
        :options="['日租', '月租', '年租']" class="mb10r">
      </mt-checklist>
      <mt-field label="价格(元)" type="number"></mt-field>
      <mt-field label="描述" placeholder="不多于200字" type="textarea" rows="4"></mt-field>

      <div class="photos">
        <div class="title horizontal">上传房屋图片</div>
        <div class="panel">
          <div class="upload">
            <i class="icon icon-fa-plus-circle" @click="sheetVisible=true"></i>
          </div>
        </div>
      </div>

      <mt-actionsheet
        :actions="actions"
        v-model="sheetVisible">
      </mt-actionsheet>

      <section class="action mt10r tc ">
        <mt-button class="submit mb10r" type="primary">确定</mt-button>
      </section>
    </div>
  </div>
</template>

<script>
import zhHeader from '@/components/Header'
import Address from '@/utils/city'
export default {
  components: {
    zhHeader
  },
  data() {
    return {
      provinces: [{
          flex: 1,
          values: Object.keys(Address.city),
        }, {
          divider: true,
          content: '-',
        }, {
          flex: 1,
          values: ['北京'],
      }],
      rentType: [],
      sheetVisible: false,
      actions: [{
        name: '拍照',
        method: this.takePhoto
      },{
        name: '从相册中选择',
        method: this.openAlbum
      }]
    }
  },
  methods: {
    takePhoto() {

    },
    openAlbum() {

    },

    onAddressChange(picker, values) {
      picker.setSlotValues(1, Address.city[values[0]])
    }
  }
}
</script>

<style lang="stylus">
.push >.form
  .title
    position: relative
    font-size: 12px
    color: #888
    margin: 8px
    &::before
      display: inline-block
      content: ''
      height: 1px
      position: absolute
      bottom: -8px
      left: 0
      right: -8px
      border-bottom: 1px solid #d9d9d9
  .photos

    .panel
      padding: 10px 20px
      background: white
      .upload
        width: 4rem
        line-height: 2rem
        text-align: center
        border: 4px dotted #d9d9d9
      .icon
        font-size: 40px
  .action .submit
    width: 80%
</style>
